define(["jquery"],function($){
	function Login(){
		this.modelTemp = `<!-- 登录模态框 -->
		<div class="modal fade" id="ModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h2 class="modal-title" id="myModalLabel">用户登录</h2>
					</div>
					<div class="modal-body">
						<div class="alert alert-danger hidden login-error" role="alert">用户名或密码错误</div>
						
						<div class="modal-body">
							<form class="login-from">
								<div class="form-group">
									<label for="recipient-name" class="control-label">用户名:</label>
									<input type="text" name="username" class="form-control username" id="recipient-name" placeholder="请输入用户名">
								</div>
								<div class="form-group">
									<label for="message-text" class="control-label" >密码:</label>
									<input type="password" name="password" class="form-control password" placeholder="请输入密码"></input>
								</div>
								<div class="form-group">
									<label for="svgcode" class="control-label" >验证码:</label>
									<input type="text" name="testcode" class="form-control" id="svgcode" placeholder="请输入验证码"></input>
									<div class="gen-box"></div>
								</div>
								<div class="alert alert-danger hidden code-error" role="alert">验证码错误</div>
							</form>
						</div>
					</div>
					<div class="modal-footer">
					    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary btn-login">登录</button>
					</div>
				</div>
			</div>
		</div>`
		this.createDom();
		this.addListener();
		this.genCode();
	}
	$.extend(Login.prototype,{
		//创建模态框
		createDom(){
			$(this.modelTemp).appendTo("body");
		},
		//生成验证码
		genCode(){
			$.get("/createcode",resdata=>{
				$(".gen-box").html(resdata.res_body.data);
			})
		},
		//校验验证码
		testhandle(e){
			const testcode = $(e.target).val();
			$.get("/testcode",{testcode},resdata=>{
				if (resdata.res_body.valid !== true) {
					$(".code-error").removeClass("hidden");
				}else{
					$(".code-error").addClass("hidden");
				}
			});
		},
		//注册时间监听
		addListener(){
			//给登录按钮添加点击事件
			$(".btn-login").on("click",this.loginHandle);
			//点击切换验证码
			$(".gen-box").on("click",this.genCode);
			//失去焦点验证验证码
			$("#svgcode").on("blur",this.testhandle);
		},
		//登录业务
		loginHandle(){
			if (sessionStorage.password) {
				const username = sessionStorage.username;
				$("#ModalLogin").modal('hide');
				$(".already-login").removeClass("hidden")
								   .find(".link-username").text(username)
								   .end().siblings(".not-login").remove();
			}else {
				//const url = "http://rap2api.taobao.org/app/mock/119565/login";
				const url = "/api/users/login";
				//获得表单信息序列字符串
				const data = $(".login-from").serialize();
				console.log(data);
				//ajax请求
				$.post(url,data,res=>{
					console.log(res);
					if (res.res_body.status === 0) {//登录失败
						console.log(123);
						//弹出警告框
						$(".login-error").removeClass("hidden");
					}else{//登录成功存信息、模态框消失、头部用户名出现
						const username = res.res_body.data.username,
						      password = res.res_body.data.password;
						sessionStorage.username = username;
						sessionStorage.password = password;
						$("#ModalLogin").modal('hide');
						$(".already-login").removeClass("hidden")
										   .find(".link-username").text(username)
										   .end().siblings(".not-login").remove();
					}
				})
			}
		}
	})
	return new Login();
})